import React from 'react';
import { Star, Quote, Users } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';

const testimonials = [
  {
    name: "李老师",
    role: "在线教育讲师",
    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face&auto=format",
    quote: "使用VideoFlow后，我的课程制作效率提升了50%，分镜脚本功能让我的视频更加专业。",
    rating: 5
  },
  {
    name: "王先生",
    role: "短视频博主",
    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face&auto=format",
    quote: "AI创作功能太棒了！帮我快速生成文案和脚本，让我的创作灵感源源不断。",
    rating: 5
  },
  {
    name: "张女士",
    role: "企业培训师",
    avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face&auto=format",
    quote: "项目管理功能让我的培训视频制作井井有条，团队协作效率大幅提升。",
    rating: 5
  },
  {
    name: "陈总监",
    role: "市场营销总监",
    avatar: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150&h=150&fit=crop&crop=face&auto=format",
    quote: "封面制作和音乐库功能让我们的营销视频制作变得简单高效，品质显著提升。",
    rating: 5
  },
  {
    name: "刘老师",
    role: "培训机构创始人",
    avatar: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&h=150&fit=crop&crop=face&auto=format",
    quote: "提词器功能解决了我们录制时的大难题，多端适配让团队协作更加顺畅。",
    rating: 5
  },
  {
    name: "赵先生",
    role: "内容创作者",
    avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=150&h=150&fit=crop&crop=face&auto=format",
    quote: "从文案到成片，VideoFlow覆盖了整个创作流程，让我专注于内容本身。",
    rating: 5
  }
];

export default function SocialProof() {
  return (
    <section className="bg-gradient-to-b from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 py-8">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-20">
          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
            真实用户
            <span className="bg-gradient-to-r from-rose-600 to-rose-700 bg-clip-text text-transparent">
              成功案例
            </span>
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
            看看我们的用户如何通过VideoFlow提升视频创作效率
          </p>
        </div>

        {/* Testimonials Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
          {testimonials.map((testimonial, index) => (
            <Card 
              key={index} 
              className="group relative bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 overflow-hidden"
            >
              {/* Quote icon */}
              <div className="absolute top-4 right-4 text-rose-200 dark:text-rose-700 group-hover:text-rose-300 dark:group-hover:text-rose-600 transition-colors">
                <Quote className="w-8 h-8" />
              </div>
              
              <CardContent className="p-6 space-y-6">
                {/* Rating */}
                <div className="flex items-center space-x-1">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />
                  ))}
                </div>
                
                {/* Quote */}
                <blockquote className="text-gray-700 dark:text-gray-300 leading-relaxed group-hover:text-gray-800 dark:group-hover:text-gray-200 transition-colors">
                  "{testimonial.quote}"
                </blockquote>
                
                {/* User info */}
                <div className="flex items-center space-x-4">
                  <div className="relative">
                    <img
                      className="h-12 w-12 rounded-full object-cover ring-2 ring-rose-100 dark:ring-rose-800 group-hover:ring-rose-200 dark:group-hover:ring-rose-700 transition-all"
                      src={testimonial.avatar}
                      alt={`${testimonial.name}的头像`}
                      onError={(e) => {
                        e.currentTarget.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(testimonial.name)}&background=random&color=fff&size=150`;
                      }}
                    />
                    <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-gradient-to-r from-green-500 to-green-600 rounded-full border-2 border-white dark:border-slate-800" />
                  </div>
                  <div>
                    <h4 className="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors">
                      {testimonial.name}
                    </h4>
                    <p className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors">
                      {testimonial.role}
                    </p>
                  </div>
                </div>
              </CardContent>
              
              {/* Hover gradient */}
              <div className="absolute inset-0 bg-gradient-to-br from-rose-50/0 to-green-50/0 dark:from-rose-900/0 dark:to-green-900/0 group-hover:from-rose-50/30 group-hover:to-green-50/30 dark:group-hover:from-rose-900/20 dark:group-hover:to-green-900/20 transition-all duration-300 pointer-events-none rounded-xl" />
            </Card>
          ))}
        </div>
        
        {/* Bottom stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {[
            { number: "1000+", label: "活跃用户", color: "from-rose-500 to-rose-600" },
            { number: "50%", label: "效率提升", color: "from-green-500 to-green-600" },
            { number: "4.9", label: "用户评分", color: "from-yellow-500 to-yellow-600" },
            { number: "24/7", label: "技术支持", color: "from-purple-500 to-purple-600" }
          ].map((stat, index) => (
            <div key={index} className="text-center group">
              <div className={`text-4xl font-bold bg-gradient-to-r ${stat.color} bg-clip-text text-transparent mb-2 group-hover:scale-110 transition-transform duration-300`}>
                {stat.number}
              </div>
              <div className="text-gray-600 dark:text-gray-300 font-medium">
                {stat.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
